<template>
  <van-nav-bar
    title="修改密码"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @failed="onFailed" @submit="changePwd()">
    <van-cell-group inset>
      <van-field
        v-model="form.oldpassword"
        type="password"
        name="oldpassword"
        label="旧密码"
      />
      <van-field
        v-model="form.newpassword"
        type="password"
        name="newpassword"
        label="新密码"
      />
      <van-field
        v-model="form.definepassword"
        type="password"
        name="definepassword"
        label="确认密码"
      />
    </van-cell-group>
    <div class="text">
      <van-icon name="checked" />
      <span>密码由8-16位数字、字母或符号组成</span>
    </div>
    <div class="text">
      <van-icon name="checked" />
      <span>至少含2种以上字符</span>
    </div>
    <div style="margin: 16px">
      <van-button
        style="background-color: #ead7c6; border: none"
        round
        block
        type="primary"
        native-type="submit"
      >
        确认
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      form: {
        oldpassword: "",
        newpassword: "",
        definepassword: "",
      },
      editPwdQueryInfo: {
        methodName: "mineInfo_editPwd",
        data: {
          newPwd: "",
          oldPwd: "",
        },
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async changePwd() {
      this.editPwdQueryInfo.data.oldPwd = this.form.oldpassword;
      this.editPwdQueryInfo.data.newPwd = this.form.newpassword;
      if (this.checkPwd()) {
        const { data: res } = await this.$http.post(
          "/app/main",
          JSON.stringify(this.editPwdQueryInfo),
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        if (res.code != 200) return Toast.fail(res.msg);
        Toast.success("修改密码成功");
      }
    },
    // 判断两次密码是否一样
    checkPwd() {
      if (this.form.newpassword == this.form.definepassword) {
        return true;
      } else {
        Toast.fail("两次密码不一致");
        return false;
      }
    },
  },
};
</script>

<style scoped>
.text {
  margin-left: 30px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 30px;
}
.van-icon {
  color: #df8f7d;
}
</style>